<template>
  <el-container id="lap-app" v-loading="pageLoading">
    <el-main>
      <lap-find-bar>
        <template slot="default">
          <el-select
            v-model="searchConfig.SearchText.Logger"
            filterable
            clearable
            placeholder="请选择日志类型"
            style="width:200px;"
            @change="onSearch"
          >
            <el-option
              v-for="item in LogTypeList"
              :key="item.LoggerName"
              :label="item.LoggerName"
              :value="item.LoggerName"
            ></el-option>
          </el-select>
          <el-input
            placeholder="输入线程后回车"
            v-model="searchConfig.SearchText.Thread"
            @change="onSearch"
            style="width:150px;"
          ></el-input>
          <el-date-picker
            placeholder="请输入开始日期"
            v-model="searchConfig.SearchText.DateBegin"
            @change="onSearch"
            align="right"
            type="date"
            style="width:150px;"
          ></el-date-picker>
          <el-date-picker
            placeholder="请输入结束日期"
            v-model="searchConfig.SearchText.DateEnd"
            @change="onSearch"
            align="right"
            type="date"
            style="width:150px;"
          ></el-date-picker>
          <el-input
            placeholder="输入消息关键字回车"
            v-model="searchConfig.SearchText.Message"
            @change="onSearch"
            style="width:250px"
          >
            <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
          </el-input>
          <el-button icon="el-icon-clear" @click="onHandleClear">清空查询条件</el-button>
        </template>
      </lap-find-bar>
      <lap-table-bar>
        <template slot="title">近期日志列表（最近三个月）</template>
      </lap-table-bar>
      <el-table
        ref="table"
        :data="tableData"
        :highlight-current-row="true"
        class="dbclickable"
        @row-dblclick="onDetail"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column property="Date" label="日期" :show-overflow-tooltip="true" width="130"></el-table-column>
        <el-table-column property="Logger" label="类型" :show-overflow-tooltip="true" width="150"></el-table-column>
        <el-table-column property="Thread" label="线程" :show-overflow-tooltip="true" width="70"></el-table-column>
        <el-table-column property="Level" label="等级" :show-overflow-tooltip="true" width="70"></el-table-column>
        <el-table-column property="Message" label="消息" :show-overflow-tooltip="true" width="300"></el-table-column>
        <el-table-column property="Exception" label="异常" :show-overflow-tooltip="true" width="150"></el-table-column>
        <el-table-column property="TraceStack" label="堆栈" :show-overflow-tooltip="true" width="200"></el-table-column>
        <el-table-column property="Url" label="Url" :show-overflow-tooltip="true" width="120"></el-table-column>
        <el-table-column
          property="UrlRefer"
          label="UrlRefer"
          :show-overflow-tooltip="true"
          width="120"
        ></el-table-column>
        <el-table-column property="Cookie" :show-overflow-tooltip="true" label="Cookie" width="120"></el-table-column>
        <el-table-column property="Session" :show-overflow-tooltip="true" label="Session"></el-table-column>
        <el-table-column label="操作" fixed="right" width="60">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="()=>onHandleCopy(scope.row)"
              class="copyBtn"
              data-index="index"
            >复制</el-button>
          </template>
        </el-table-column>
      </el-table>
      <lap-pagination ref="pager" @pager-change="onPagerChange" :total="pager.total"></lap-pagination>

      <!--编辑页面-->
      <el-drawer
        ref="detailDrawer"
        title="日志类型信息"
        size="60%"
        :visible.sync="editVisible"
        :destroy-on-close="true"
      >
        <RecentLogEdit :detailData="selectedRow"></RecentLogEdit>
      </el-drawer>
    </el-main>
  </el-container>
</template>
<script>
import Clipboard from "clipboard";
import RecentLogEdit from "./RecentLogEdit.vue"; //编辑页面组件
export default {
  mixins: [$lap.BaseView],
  name: "app",
  components: { RecentLogEdit }, //引用组件
  data() {
    return {
      title: "", //页面标题，例如：用户管理
      pageFunctionCode: "", //页面功能定义，例如：00100104
      LogTypeList: [],
      searchConfig: {
        PageSize: 100,
        PageCurrent: 1,
        SearchText: {
          DateBegin: null,
          DateEnd: null,
          Thread: null,
          Level: null,
          Logger: null,
          Message: null,
          Exception: null,
          TraceStack: null,
          Url: null,
          UrlRefer: null,
          Cookie: null,
          Session: null,
        },
      },
      tableData: [],
      pager: {},
      //编辑相关字段
      editVisible: false,
      selectedRow: null,
      pageLoading : false
    };
  },
  methods: {
    /**
     * 加载
     */
    platLoadData() {
      const that = this;
      $lap
        .post("/MLogXWeb/LogHandler.ashx", {
          type: "GetAllLogger",
        })
        .then((data) => {
          that.LogTypeList = data;
        });

      that.loadData();
    },
    /**
     * 加载数据
     */
    loadData() {
      const that = this;
      that.pager = that.$refs["pager"].getPager();
      that.searchConfig.PageSize = that.pager.pageSize;
      that.searchConfig.PageCurrent = that.pager.currentPage;

      that.pageLoading = true;
      $lap
        .post("/MLogXWeb/LogHandler.ashx", {
          type: "GetRecentLog",
          config: Base64.encode(JSON.stringify(this.searchConfig)),
        })
        .then((data) => {
          that.tableData = data.LogList;
          that.pager.total = data.DataCount;
          that.pageLoading = false;
        });
    },
    /**
     * 列表翻页
     */
    onPagerChange() {
      this.loadData();
    },
    /**
     * 搜索
     */
    onSearch() {
      const that = this;
      that.$refs["pager"].resetPager();
      that.loadData();
    },
    /**
     * 复制日志
     */
    onHandleCopy(val) {
      const that = this;
      const clipboard = new Clipboard(".copyBtn", {
        text: function (trigger) {
          let result = "";
          var keys = Object.keys(val);
          for (var i = 0; i < keys.length; i++) {
            result += keys[i] + ":\n" + val[keys[i]] + "\n";
          }
          return result;
        },
      });
      clipboard.on("success", function (e) {
        that.$message("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", function (e) {
        that.$message("复制失败");
        clipboard.destroy();
      });
    },
    /**
     * 清空日志
     */
    onHandleClear() {
      const that = this;
      let keys = Object.keys(that.searchConfig.SearchText);
      for (let i = 0; i < keys.length; i++) {
        that.searchConfig.SearchText[keys[i]] = null;
      }
      that.onSearch();
    },
    /**
     * 编辑
     */
    onDetail(row) {
      const that = this;
      that.selectedRow = row;
      that.editVisible = true;
    },
  },
  watch: {},
};
</script>